<!--
  <select-tree
    :single-check="true"    // 单选  多选为false
    v-model="devInfoMgrQueryForm.brno"
    style="width:170px;"
    :is-strictly="false"    // 是否严格遵循不为父子互相关联  默认为ture
    :props='{id:"orgno",label: "cname",children: "children"}'
    :tree-data="brnoList"   // 展示数据
    placeholder="请选择机构">
  </select-tree>
-->
<template>
  <el-popover  placement="bottom-start"    @close="closePanel" min-width trigger="hover"> 
    <div style="min-width: 150px;
    min-height: 200px;
    max-height: 300px;
    overflow:auto;">
      <el-input v-model="keySearch" placeholder="搜索"></el-input>
      <el-tree
        class="filter-tree"
        ref="tree"
        :data="treeData"
        :node-key="props.id"
        :filter-node-method="filterNode"
        :expand-on-click-node="true"
        :props="props"
      ></el-tree>
    </div>
    <!-- <el-input
      :placeholder="placeholder || `请选择`"
      v-model="selectedStr"
      slot="reference"
      trigger="focus"
      readonly
    ></el-input> -->
    <el-button  slot="reference"
     size="mini" type="text"  icon="el-icon-caret-bottom" >{{showText}}</el-button>
       <!-- <el-button  slot="reference"
     size="mini" type="text" icon="el-icon-caret-bottom"  >地区</el-button>
       <el-button  slot="reference"
     size="mini" type="text" icon="el-icon-caret-bottom"  >业务</el-button> -->
  </el-popover>
</template>

<script>
//依赖elementui
//目前将点选择设值为单个独立选择
export default {
  name: "selectTree",
  data: function() {
    return {
      keySearch: "",
      selectedStr: "",
      // showText:""
    };
  },
  props: {
    checkedIds: Array,
    showText:String,
    treeData: {
      type: Array,
      required: true
    },
    props: Object,
    singleCheck: [String, Boolean],
    placeholder: String,
    isStrictly: {
      type: Boolean,
      default: true //是否严格父子关联
    }
  },
  computed: {

  },
  methods: {
    //使用computed钩子会出现错误 所以定义方法在每一个节点自行调用
    arrToString() {
      let arr = this.$refs.tree.getCheckedNodes();
      let output = [];
      arr.map(
        function(item) {
          output.push(item[this.props.label]);
        }.bind(this)
      );
      this.selectedStr = output.join(",");
    },
    checkChange() {
      this.arrToString();
    },
    checkBoxHandle(data, b) {
      //当单选时
      if (this.singleCheck == true || this.singleCheck == "true") {
        this.$refs.tree.setCheckedNodes([data]);
      }
      this.$emit("checkKeys", this.$refs.tree.getCheckedKeys());
      this.$emit("select-check", this.$refs.tree.getCheckedNodes());
    },
    // tree 本地过滤
    filterNode(value, data) {
      let keyword = this.props.id;
      if (!value) return true;
      return (
        data[this.props.label].indexOf(value) !== -1 ||
        (data[keyword] ? data[keyword].indexOf(value) !== -1 : false)
      );
    },
    closePanel() {
      this.keySearch = ''
    }
  },
  model: {
    prop: "checkedIds",
    event: "checkKeys"
  },
  watch: {
    keySearch(val) {
      this.$refs.tree.filter(val);
    },
    treeData() {
      this.arrToString();
    },
    checkedIds() {
      this.$refs.tree.setCheckedKeys(this.checkedIds);
      this.arrToString();
    },
    isStrictly() {
      return this.isStrictly
    },
    deep: true
  },
  mounted() {
    this.arrToString();
  },
  updated() {
    this.arrToString();
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-input /deep/.el-input__inner {
  cursor: pointer;
}
.el-popover /deep/.el-input__inner {
  cursor: text;
}

</style>
